<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@	taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>
	<spring:message code="text_usersignup" text="User sign up" />
</title>
<style>
.styled-form{
	margin: 90px auto 30px;
	padding: 30px 0 0;
}
</style>
<meta name="decorator" content="plain" />
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="span8 offset2">
				<div class="styled-form" style="padding:50px;">
					<form id="signupForm" class="form-horizontal" action="<%=request.getContextPath()%>/pages/signup" method="POST" >
						<div class="control-group <c:if test='${!empty email_form_error}'>error</c:if>">
							<label class="control-label" for="inputEmail">
								<spring:message code="text_emailaddress" text="Email Address" />
							</label>
							<div class="controls">
								<input type="text" id="inputEmail" name="email" value="${signupForm.email}"
									placeholder="<spring:message code="text_emailaddress" text="Email Address" />">
								<span class="help-block validation-failed">
									<c:if test='${!empty email_form_error}'>
										<c:out value="${email_form_error}"/>
									</c:if>
								</span>	
							</div>
						</div>
						<div class="control-group <c:if test='${!empty username_form_error}'>error</c:if>">
							<label class="control-label" for="inputUsername">
								<spring:message code="text_username" text="Username" />
							</label>
							<div class="controls">
								<input type="text" id="inputUsername" name="username" value="${signupForm.username}"
									placeholder="<spring:message code="text_username" text="Username" />">
								<span class="help-block validation-failed">
									<c:if test='${!empty username_form_error}'>
										<c:out value="${username_form_error}"/>
									</c:if>
								</span>
							</div>
						</div>
						<div class="control-group <c:if test='${!empty password_form_error}'>error</c:if>">
							<label class="control-label" for="inputPassword">
								<spring:message code="text_password" text="Password" />
							</label>
							<div class="controls">
								<input type="password" id="inputPassword" name="password"
									placeholder="<spring:message code="text_password" text="Password" />">
								<span class="help-block validation-failed">
									<c:if test='${!empty password_form_error}'>
										<c:out value="${password_form_error}"/>
									</c:if>
								</span>
							</div>
						</div>
						<div class="control-group <c:if test='${!empty confirmPassword_form_error}'>error</c:if>">
							<label class="control-label" for="inputConfirmPassword">
								<spring:message code="text_confirmpassword" text="Confirm Password" />
							</label>
							<div class="controls">
								<input type="password" id="inputConfirmPassword" name="confirmPassword" 
									placeholder="<spring:message code="text_confirmpassword" text="Confirm Password" />">
								<span class="help-block validation-failed">
									<c:if test='${!empty confirmPassword_form_error}'>
										<c:out value="${confirmPassword_form_error}"/>
									</c:if>
								</span>
							</div>
						</div>
						<button class="btn btn-large btn-primary btn-success" type="submit">
							<spring:message code="text_createaccount" text="Create Account" />
						</button>
					</form>
					<a class="pull-right" href="<%=request.getContextPath()%>">
						<spring:message code="text_homepage" text="Home" />
					</a>
				</div>
			</div>
		</div>
	</div>
<script>
var required = '<spring:message code="message_fieldrequired" text="This field is required." />';
var email = '<spring:message code="message_entervalidemailaddress" text="Please enter a valid email address." />';
var passwordMatch = '<spring:message code="message_confirmpasswordnotmatch" text="Password not match." />';
$('#signupForm').validate({
	rules: {
		email: {
			required: true,
			email: true
		},
		username: {
			required: true
		},
		password: {
			required: true
		},
		confirmPassword: {			
			required: true,
			equalTo: '#inputPassword'
		}
	},
	messages: {
		email: {
			email: email,
			required: required
		},
		username: {
			required: required
		},
		password: {
			required: required
		},
		confirmPassword: {
			required: required,
			equalTo: passwordMatch
		}
	}
});
</script>
</body>
</html>